樣式綁定

• 我們可以透過HTML元素的class屬性、id屬性或直接使用標籤名稱來進行CSS樣式的綁定，其中，最常使用的就是class的方式，進行樣式綁定。
• 在Vue中，對class屬性的資料綁定，做了特殊的增強，方便透過boolean變數控制其設定的樣式是否被選用。

為HTML標籤綁定class屬性

• v-bind指令雖然可以直接對class屬性進行資料綁定，但如果將綁定的值設定為一個物件，就會產生一種新的語法規則，設定的物件可以指定對應的class樣式是否被選用。
  
  
• 這段程式中，div元素的class屬性會根據isBlue和idRed屬性的值而改變，當只有isBlue的值為true時，div元素的class屬性為blue，當只有isRed的值為true時，div元素的class屬性則為red。
• 另外需要注意的是，class屬性可綁定的值不會衝突，如果設定的值有多個屬性的值為true時，都會被新增至class屬性中。
• 在實際開發中，不一定要使用內聯的方式為class綁定控制物件，也可直接將其設定為一個Vue元件中的資料物件，可修改為以下的程式。

//HTML元素：
<div :class="style">
    範例文案
</div>
//Vue元件：
const App = {
    data() {
        return {
            style:{
                blue:true,
                red:false
            }
        }
    }
}

• 這段程式的執行效果與前面圖片所示的完全一樣，更多時候可以將樣式物件作為計算屬性進行回傳，使用者種方式進行元件樣式的控制非常高效。
• 另外，Vue還支援使用陣列物件來控制class屬性：

//HTML元素：
<div :class="[redClass, fontClass]">
    範例文案
</div>
//Vue元件：
const App = {
    data() {
        return {
            redClass:"red",
            fontClass:"font"
        }
    }
}

綁定內聯樣式

• 內連樣式是指直接透過HTMl元素的style屬性來設定樣式，style屬性可透過JavaScript物件來設定樣式，可直接在其內部使用Vue屬性。

//HTML元素：
<div :class="[color:textColor, fontSize:textFont]">
    範例文案
</div>
//Vue元件：
const App = {
    data() {
        return {
            textColor:'green',
            fontSize:'50px'
        }
    }
}

• 內聯設定的CSS與外部定義的CSS有一點區別，外部定義的在命名時，多採用「-」符號進行連接(如：font-size)，而內聯的CSS中屬性的命名採用的是駝峰命名法，如：fontSize。
• 內聯style同樣支援直接綁定物件屬性，直接綁定物件在實際開發中更加常用，使用計算屬性來承載樣式物件可以十分方便地進行動態樣式更新。

今天的內容就到這邊，明天將要試著實作一個範例：使用者註冊頁面。